<template>
  <xdh-echarts :options="options"></xdh-echarts>
</template>

<script>
  import XdhEcharts from '../widgets/xdh-echarts'

  export default {
    components: {
      XdhEcharts
    },
    props: {
      echartData: {
        type: Array
      },
      colors: {
        type: Array,
        default() {
          return ['#9A76BE', '#01BECC', '#FFB400', '#FF7D2E', '#F0573D']
        }
      }
    },
    computed: {
      options() {
        let that = this;
        return {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          color: that.colors,
          series: [
            {
              name: '使用情况',
              type: 'pie',
              startAngle: 45,
              radius: '50%',
              center: ['50%', '40%'],
              roseType: 'area',
              data: that.echartData,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                normal: {
                  formatter: '{per|{d}%}\n{hr|}\n{b|{b}}',
                  rich: {
                    hr: {
                      width: '100%',
                      height: 0.5,
                      backgroundColor: '#fff',
                      shadowBlur: 2,
                      shadowOffsetX: 2
                    },
                    b: {
                      color: '#fff',
                      fontSize: 18,
                      lineHeight: 36
                    },
                    per: {
                      fontSize: 28,
                      fontFamily: 'Impact',
                      borderRadius: 2,
                      lineHeight: 36,
                      align: 'left',
                      fontWeight: 'bold'
                    }
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 10,
                  length2: 10,
                  lineStyle: {
                    color: '#fff'
                  }
                }
              }
            }
          ]
        }
      }
    },
    data() {
      return {};
    }
  }
</script>
